<!-- 个人信息提交清单 -->
<template>
  <div class="">
    <div class="menu" v-if="opeIndex < 0">
      <h1>新增提交</h1>
      <label>
        姓名： <el-input v-model="userVal" autofocus="true"></el-input
      ></label>
      <label>
        性别： <el-radio v-model="radex" label="男">男</el-radio
        ><el-radio v-model="radex" label="女">女</el-radio></label
      ><label
        ><br />
        出生年月：
        <el-date-picker v-model="birthtime" type="date" placeholder="选择日期">
        </el-date-picker
      ></label>
      <label for="">
        学历：<el-select v-model="meducaVal" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </label>
      <label for="">
        备注：<el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </label>
      <div class="btn">
        <el-button type="primary" plain @click="handleSub">提交</el-button
        ><el-button type="danger" @click="handleCel">取消</el-button>
      </div>
    </div>
    <div class="menu" v-else>
      <h1>修改</h1>
      <label>
        姓名： <el-input v-model="userVal" autofocus="true"></el-input
      ></label>
      <label>
        性别： <el-radio v-model="radex" label="男">男</el-radio
        ><el-radio v-model="radex" label="女">女</el-radio></label
      ><label
        ><br />
        出生年月：
        <el-date-picker v-model="birthtime" type="date" placeholder="选择日期">
        </el-date-picker
      ></label>
      <label for="">
        学历：<el-select v-model="meducaVal" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </label>
      <label for="">
        备注：<el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </label>
      <div class="btn">
        <el-button type="primary" plain @click="handleSubAdd"
          >提交修改</el-button
        ><el-button type="danger" @click="handleCelRem">取消修改</el-button>
      </div>
    </div>
    <ul class="ul">
      <li v-for="(item, index) in valueList" :key="item.id">
        <div class="liLeft">
          <span>{{ item.name }}</span
          ><span>{{ item.sex }}</span
          ><span>{{ item.brithday.toLocaleDateString() }}</span
          ><span>{{ item.meducation }}</span>
          <span>{{ item.text }}</span>
        </div>
        <div>
          <el-button type="primary" plain @click="handleChange(index)"
            >修改</el-button
          ><el-button type="danger" @click="handleRem(index)">删除</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      opeIndex: -1,
      // 姓名
      userVal: '',
      // 性别
      radex: '',
      // 出生时间
      birthtime: '',
      // 学历
      meducaVal: '',
      // 备注
      textarea: '',
      valueList: [],
      options: [
        {
          value: '高中',
          label: '高中'
        },
        {
          value: '中专',
          label: '中专'
        },
        {
          value: '大专',
          label: '大专'
        },
        {
          value: '本科',
          label: '本科'
        },
        {
          value: '研究生',
          label: '研究生'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleSub() {
      console.log(!this.userVal.length, !this.radex);
      if (!this.birthtime || !this.userVal || !this.radex) {
        this.$message.error('搞什么呢？输点东西！');
        return false;
      }
      this.valueList.push({
        id: new Date().getTime(),
        name: this.userVal,
        sex: this.radex,
        brithday: this.birthtime,
        meducation: this.meducaVal,
        text: this.textarea
      });
      this.$message({
        message: '(*^_^*)！',
        type: 'success'
      });
      this.handleCel();
      console.log(this.valueList);
    },
    // 点击取消，清除输入框
    handleCel() {
      (this.userVal = ''),
        // 性别
        (this.radex = ''),
        // 出生时间
        (this.birthtime = ''),
        // 学历
        (this.meducaVal = ''),
        // 备注
        (this.textarea = '');
    },
    // 点击修改
    handleChange(index) {
      this.opeIndex = index;
      console.log(this.valueList[index]);
      (this.userVal = this.valueList[index].name),
        // 性别
        (this.radex = this.valueList[index].sex),
        // 出生时间
        (this.birthtime = this.valueList[index].brithday),
        // 学历
        (this.meducaVal = this.valueList[index].meducation),
        // 备注
        (this.textarea = this.valueList[index].text);
    },
    // 点击删除
    handleRem(index) {
      this.valueList.splice(index, 1);
    },
    // 点击提交修改
    handleSubAdd() {
      this.valueList.splice(this.opeIndex, 1, {
        id: new Date().getTime(),
        name: this.userVal,
        sex: this.radex,
        brithday: this.birthtime,
        meducation: this.meducaVal,
        text: this.textarea
      });
      this.handleCel();
    },
    // 点击取消修改
    handleCelRem() {
      this.handleCel();
      this.opeIndex = -1;
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.menu {
  width: 200px;
}
.btn {
  margin-top: 20px;
  display: flex;
}
.ul li {
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
.ul .liLeft span {
  display: block;
}
.ul li .liLeft {
  width: 600px;
  display: flex;
  line-height: 40px;
  justify-content: space-between;
}
</style>
